<template>
  <div class="contain">
    <div class="con-left">
      <div class="QRCode">
        <img src="./QRcode.jpg" alt />
      </div>
      <div class="download">
        <i class="user-icon user-icon_xz"></i>
        <em class="user-icon icon-icon_do"></em>
      </div>
    </div>
    <div class="con-mid">
      <div class="cm-z-left">
        <div class="zx-top">
          <span class="user-icon user-icon_news"></span>
          <p class="underline"></p>
        </div>
        <div class="zx-bottom">
          <ul class="hd">
            <li v-for="(item,index) in news" :key="index" @click="zxtitleClick=index">
              <a :class="{'fontActive':index == zxtitleClick}">{{item}}</a>
              <em v-if="index < 3"></em>
            </li>
          </ul>
          <p class="zx-title">
            <a target="_blank" href>[OL]6.6-6.20 龙舟赛事争霸 粽情端午一夏</a>
          </p>
          <div class="bd">
            <div v-for="value,index in zxList" v-show="index==zxtitleClick" :class="index">
              <dl v-for="(item,i) in value" :key="item.id" v-if="index<6">
                <dd>
                  <a @click="xiangqingClick(item)">
                    <p class="bd-name">{{item.title}}</p>
                    <p class="bd-time">{{item.date}}</p>
                  </a>
                </dd>
              </dl>
            </div>
          </div>
        </div>
      </div>
      <router-link
        tag="a"
        :to="{path:'wenZ/details',query:{title:'[OL]三国杀Online新手教程'}}"
        class="cm-z-right"
      ></router-link>
    </div>
    <div class="con-right">
      <div class="bd" id="play">
        <p v-for="(item,index) in playImage" :class="{'opacity':index!=0}">
          <img :src="item" alt />
        </p>
      </div>
      <ul class="hd">
        <li
          v-for="index in 4"
          :key="index"
          :class="['play'+index,{'playOn':playHover==index}]"
          @mousemove="playHover = index;playImageSwitching(index-1)"
        ></li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 游戏资讯导航标签
      news: ["综合", "资讯", "活动", "公告"],
      //游戏资讯内容
      zxList: "",
      // 游戏资讯标签栏的当前第几个li
      zxtitleClick: 0,
      // 游戏资讯列表的当前第几个li
      zxListHover: -1,
      // 游戏模式小图标
      playHover: 1,
      // 游戏模式图片
      playImage: [
        require("./ident1.jpg"),
        require("./ident2.jpg"),
        require("./ident3.jpg"),
        require("./ident4.jpg")
      ]
    };
  },
  mounted() {
    this.$ajax.get(
      "../../../../static/data.json"
    ).then(
      res => {
        this.zxList = res.data.tabList;
        console.log(this.zxList[1]);
      },
      reject => {
        console.log("请求失败", reject);
      }
    );
  },
  methods: {
    // 游戏模式图片切换
    playImageSwitching: function(i) {
      let playDom = document.getElementById("play").children;
      for (let i = 0; i < playDom.length; i++) {
        const element = playDom[i];
        element.className = "opacity";
      }
      playDom[i].className = "";
    },
    // 游戏资讯跳转
    xiangqingClick(item) {
      this.$router.push({
        path: "/wenZ/details",
        query: {
          title: item.title
        }
      });
    }
  }
};
</script>